<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语音转文字示例</title>
</head>
<body>

<button id="startButton">开始语音输入</button>
<button id="stopButton" disabled>停止语音输入</button>
<p>识别结果：<span id="result"></span></p>

<script>
// 检查浏览器是否支持语音识别
if ('SpeechRecognition' in window) {
  const recognition = new SpeechRecognition();
  recognition.lang = 'zh-CN'; // 设置识别的语言为中文

  // 识别结果事件
  recognition.onresult = event => {
    const last = event.results.length - 1;
    const transcript = event.results[last][0].transcript;
    document.getElementById('result').textContent = transcript;
  };

  // 识别结束事件
  recognition.onend = () => {
    document.getElementById('stopButton').disabled = true;
    document.getElementById('startButton').disabled = false;
  };

  // 识别错误事件
  recognition.onerror = error => {
    console.error('语音识别错误:', error);
  };

  // 开始语音识别
  document.getElementById('startButton').addEventListener('click', () => {
    recognition.start();
    document.getElementById('startButton').disabled = true;
    document.getElementById('stopButton').disabled = false;
  });

  // 停止语音识别
  document.getElementById('stopButton').addEventListener('click', () => {
    recognition.stop();
    document.getElementById('startButton').disabled = false;
    document.getElementById('stopButton').disabled = true;
  });

} else {
  alert('您的浏览器不支持语音识别');
}
</script>

</body>
</html>